<template>
	<ml-page>
		<view class="basics">
			<component :is="now.component"></component>
			<view v-if="hasNext" class="iconfont icon-next-page" @click="handleNext"></view>
		</view>
	</ml-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
import AboutMahjong from './components/AboutMahjong.vue';
import DiscardTile from './components/DiscardTile.vue';
import OneGame from './components/OneGame.vue';

const catalogs = [
	{
		title: '初识麻将',
		component: AboutMahjong
	},
	{
		title: '一场麻将',
		component: OneGame,
	},
	{
		title: '打出麻将',
		component: DiscardTile
	}
];

const current = ref(0);

const now = computed(() => catalogs[current.value]);

const hasNext = computed(() => catalogs.length > current.value + 1);

onLoad((options) => {
	current.value = Number(options.current) || 0;
});

const handleNext = () => {
	const nextCurrent = current.value + 1;
	uni.navigateTo({
		url: '/pages/basics/index?current=' + nextCurrent,
		animationType: 'pop-in',
		animationDuration: 200,
		success: (res) => {},
		fail: (error) => {
			console.log('fail', error);
		},
		complete: () => {}
	});
};
</script>

<style lang="less" scoped>
.basics {
	position: relative;
}
.icon-next-page {
	position: absolute;
	bottom: 30rpx;
	right: 30rpx;
	font-size: 28rpx;
	color: rgb(255, 255, 255);
	
	&:active {
		color: rgba(180, 180, 180, 0.5);
	}
}
</style>
